// Name:            Tabs
//
// Description:     Define style for Tabs Plugin
//
// Component:       `.am-tabs`
//
// Sub-objects:     `.am-tabs-nav`
//                  `.am-tabs-bd`
//                  `.am-tab-panel`
//
// States:          `.am-active`
//
// Uses:            Nav
//                  Animation
//
// =============================================================================

/* ==========================================================================
   Component: Tabs Plugin
 ============================================================================ */

.@{ns}tabs {
    .hook-tabs;
}

.@{ns}tabs-bd {
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    border-top: none;
    z-index: 100;
    transition: height .3s;
    .clearfix();
    .hook-tabs-bd;
    .@{ns}tab-panel {
        position: absolute;
        top: 0;
        z-index: 99;
        float: left;
        width: 100%;
        padding: 10px 10px 15px;
        visibility: hidden;
        transition: transform 0.3s;
        transform: translateX(-100%);
        .hook-tab-panel;
        * {
            -webkit-user-drag: none;
        }
        &.@{ns}active {
            position: relative;
            z-index: 100;
            visibility: visible;
            transform: translateX(0);
            &~.@{ns}tab-panel {
                transform: translateX(100%);
            }
        }
    }
    // nested Tabs
    .@{ns}tabs-bd {
        border: none;
    }
}

// #699
// @since 2.5
.@{ns}tabs-bd-ofv {
    overflow: visible;
    >.@{ns}tab-panel {
        display: none;
        &.@{ns}active {
            display: block;
        }
    }
}

// fade animation in React version
.@{ns}tabs-fade {
    .@{ns}tab-panel {
        opacity: 0;
        transition: opacity .25s linear;
        &.@{ns}in {
            opacity: 1;
        }
    }
}

.@{ns}tabs-nav {
    > li {
        position: relative;

        .am-close {
            position: absolute;
            right: 0px;
            top: -12px;
        }
    }
}

// HOOKS
// =============================================================================
.hook-tabs() {}

.hook-tabs-bd() {}

.hook-tab-panel() {}